import { Component } from "react";
import
{
    Scene, PerspectiveCamera, WebGLRenderer, MeshBasicMaterial, BufferGeometry,
    Vector3,
    Line,
    Shape,
    MeshPhongMaterial,
    DoubleSide
} from 'three';
import { WEBGL } from '../../assets/Check.js';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { ShapeGeometry } from "three";
import { Mesh } from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';//直接引用包里面的


@observer
export default class Demo02 extends Component<{}, {}>
{
    @observable private myDemo = document.getElementById("demo02") as HTMLDivElement;
    @observable renderer = new WebGLRenderer();
    @observable camara = new PerspectiveCamera(
        45,
        this.myDemo.offsetWidth / this.myDemo.offsetHeight,
        1,
        500
    );
    @observable scene = new Scene();
    @observable material = new MeshBasicMaterial({ color: 'red' });
    @observable points = [
        new Vector3(-10, 0, 0),
        new Vector3(0, 10, 0),
        new Vector3(10, 0, 0)
    ];
    @observable geometry = new BufferGeometry().setFromPoints(this.points);
    @observable control = new OrbitControls(this.camara, this.renderer.domElement);
    @action renderLine = () =>
    {
        this.renderer.setSize(this.myDemo.offsetWidth, this.myDemo.offsetHeight);
        this.myDemo.appendChild(this.renderer.domElement);

        this.camara.position.set(0, 0, 100);
        this.camara.lookAt(0, 0, 0);

        const line = new Line(this.geometry, this.material);
        this.scene.add(line);
        this.renderer.render(this.scene, this.camara);
    };

    @action drawLine = (e: any) =>
    {
        console.log(e);
    };

    componentDidMount()
    {
        this.renderLine();
        // WEBGL.isWebGLAvailable() ? this.renderLine() : console.log("nnonono");
        this.control.addEventListener('change', () => { this.renderer.render(this.scene, this.camara); });
    }
    render()
    {
        return (
            <div id="demo02" style={{ width: "100%", height: "100%" }}
                onKeyDown={this.drawLine}>
            </div>
        );
    }
}
